<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Simple Ajax Application</title>
  <!-- (1) Load library scripts, courtesy of Yahoo! YUI. -->
  <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
  <script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js" type="text/javascript"></script>
  <!-- New scripts for Ajax connectivity. -->
  <script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js" type="text/javascript"></script>
  <script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js" type="text/javascript"></script>
</head>
<body>
  <!-- (2) Render text input controls. -->
  <form id="elForm" action="index.html">
    <p>
        <label for="username" id="username_label">Username: </label>
        <input name="username" type="text" id="elForm_username" />
    </p>
    <p>
        <label for="password" id="password_label">Password: </label>
        <input name="password" type="password" id="elForm_password" />
    </p>
    <p>
        <input name="elButton" type="button" id="elForm_elButton" value="Sign In" /> 
    </p>
  </form>
  <hr />
  <!-- (3) Provide a message area. --> 
  <div id="elDiv"></div>
  <!-- (4) Initialize the button and div, define the callback and handleClick functions, and attach handleClick to the button. -->
  <script type="text/javascript">
    var elButton = new YAHOO.util.Element("elForm_elButton");
    var elDiv = YAHOO.util.Dom.get("elDiv");
    var sUrl = "Service.asmx/Authenticate";
  
    var fnResponseText = function (o) {
	    if(o.responseText !== undefined){
		    elDiv.innerHTML = "<ul><li>Transaction id: " + o.tId + "</li>";
		    elDiv.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		    elDiv.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
		    elDiv.innerHTML += "<li>HTTP headers: " + o.getAllResponseHeaders + "</li>";
		    elDiv.innerHTML += "<li>HTTP text response: " + o.responseText + "</li>";
		    elDiv.innerHTML += "<li>Argument object: " + o.argument + "</li></ul>";
	    }
    }
                
	<!-- (5) The callback function runs when the XHR returns. -->
    var onCallback = {
     success: function(o) {
        // fnResponseText(o);
        // alert("AJAX works! " + "Status is (" + o.status + ") " + o.statusText + "."); //SUCCESS
        
        },
     failure: function(o) {
        fnResponseText(o);
        alert("AJAX doesn't work! " + "Status is (" + o.status + ") " + o.statusText + "."); //FAILURE
     }
    }

	<!-- (6) The event handler hands off to the callback method. --> 
    var onClick = function(e) {
        var elForm = document.getElementById("elForm");
        YAHOO.util.Connect.setForm(elForm);        
        var oRequest = YAHOO.util.Connect.asyncRequest("POST", sUrl, onCallback);
    };
    elButton.on("click", onClick, "elForm_elButton");

<!-- -->
function notesResponseHandler(req)
{
    // Make sure the request is loaded (readyState = 4)
    if (req.readyState == 4)
    {
        // Make sure the status is "OK"
        if (req.status == 200)
        {
            var swappableSection = document.getElementById('elDiv');
            var notes = req.responseXML.getElementsByTagName('note');
            var str = '';
            for(i=0; i < notes.length; i++)
            {
                var noteNode = notes.item(i);
                if(noteNode != null && noteNode.hasChildNodes())
                {
                   str += noteNode.getAttribute('name') + ': ';
                    str += noteNode.firstChild.nodeValue + '<br />';
                }
            }
            swappableSection.innerHTML = str;
        }
        else
        {
            alert("There was a problem retrieving the XML data:\n" +
                    req.statusText);
        }
    }
}

    </script>
  </body>
</html>
